<!DOCTYPE html>
<html>
	<head>
	<meta charset="UTF-8">
	<title>indexDB</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" href="../../css/mui.min.css">
    <link href="css/common.css" rel="stylesheet" />
    <style type="text/css">
      .mui-content{margin:10px; padding:10px; background:#FFF;}
    </style>
	</head>
	<body>
	  <header class="mui-bar mui-bar-nav">
      <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
      <h1 class="mui-title">数据缓存</h1>
    </header>
    <div class="mui-content">
		<button onclick="getDatas();">获取数据</button>
		<button onclick="getDatas1();">获取数据1</button>
		<button onclick="deleteDb();">删除数据库</button>
		<div id="d1"></div>
    </div>
    
	<script src="../../js/mui.min.js"></script>
    <script src="./js/mkeyplus.base.js"></script>
    <script type="text/javascript" src="../../js/jquery-3.2.1.min.js"></script>
    <script src="./js/sqlite.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
	// $(document).ready(function () {
		let db = {};
		//兼容火狐和谷歌写法获得indexedDB对象
		if (!window.indexedDB) {
		  window.indexedDB = window.mozIndexedDB || window.webkitIndexedDB;
		}
		/**
		 * 创建和打开数据库(不存在创建)
		 * test:数据库名称
		 * 3:数据库的版本号
		 * onupgradeneeded:更新数据库函数，版本号改变后会被调用
		 */
		var request = indexedDB.open("test", 1);
		request.onupgradeneeded = function (event) {
		  alert(event.oldVersion);
		  db = request.result;
		  if (db.objectStoreNames.contains('books')) {
			db.deleteObjectStore('books');
		  }
		  /***
		   * books:数据表
		   * keyPath:主键
		   * createIndex:创建索引分别是by_title by_author(在书的数据表中，可以根据书的名字和作者来进行查询)
		   * unique: true:过滤重复
		   */
		  var store = db.createObjectStore("books", { keyPath: "isbn" });
		  var titleIndex = store.createIndex("by_title", "title", { unique: true });
		  var authorIndex = store.createIndex("by_author", "author");
		
		  /**
		   *进行数据插入
		   */
		  store.put({ title: "Quarry Memories", author: "Fred", isbn: 123456, other: "..ceshi...." });
		  store.put({ title: "Water Buffaloes", author: "Fred", isbn: 234567 });
		  store.put({ title: "Bedrock Nights", author: "Barney", isbn: 3456780000000000000 });
		
		  
		};
		//成功 //异步
		request.onsuccess = function () {
		  db = request.result;
		};
		//通过事务、索引获取数据
		function getDatas() {
		  var tx = db.transaction("books", "readonly");
		  var store = tx.objectStore("books");
		  var index = store.index("by_title");
		
		  var request = index.get("Water Buffaloes");
		  request.onsuccess = function () {
			var matching = request.result;
			if (matching !== undefined) {
			  // A match was found.
			  console.log(matching);
			  $("#d1").text(JSON.stringify(matching))
			} else {
			  // No match was found.
			  console.log(123)
			}
		  };
		}
		//通过事务、游标、索引获取数据
		function getDatas1() {
		  var tx = db.transaction("books", "readonly");
		  var store = tx.objectStore("books");
		  var index = store.index("by_author");
		
		  var request = index.openCursor(IDBKeyRange.only("Fred"));
		  var tmp = "";
		  request.onsuccess = function (event) {
			var cursor = request.result; //也可以写成var cursor = event.target.result;
			if (cursor) {
			  // tmp += cursor.value.isbn + ";" + cursor.value.title + ";" + cursor.value.author;
			  // cursor.continue();
			  // listData.obj = cursor.value
			  $("#d1").text(JSON.stringify(cursor.value))
			  console.log(cursor.value)
			} else {
			  console.log('err')
			}
		
		  };
		}
		function deleteDb() {
		  var deleteDbRequest = indexedDB.deleteDatabase('test');
		  deleteDbRequest.onsuccess = function (event) {
			alert('success...');
		  };
		  deleteDbRequest.onerror = function (e) {
			alert('error...');
		  };
		}
	// })
      
      
    </script>
	</body>
</html>
